<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>jKinect - Kinectify your web application</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
        body
        {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="javascript/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-2662908-3']);
		_gaq.push(['_setDomainName', 'jkinect.com']);
		_gaq.push(['_setAllowLinker', true]);
		_gaq.push(['_trackPageview']);
		(function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="#">jKinect</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a data-toggle="modal" href="#about">About Us</a></li>
                        <li><a data-toggle="modal" href="#otherProjects">Our other projects</a></li>
                        <li><a data-toggle="modal" href="#alternatives">Alternatives projects</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container">
        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="hero-unit" style="padding: 20px">
            <p>
                <img src="img/logo150.png" alt="jKinect" title="jKinect" />
                - Kinectify your web site</p>
            <div class="row">
                <div id="useCasesCarousel" class="carousel slide span3 offset0">
                    <div class="carousel-inner">
                        <div class="active item">
                            <img src="img/usecases/Gallinect-fredo2.jpg" /></div>
                        <div class="item">
                            <img src="img/usecases/Gallinect-fredo4.jpg" /></div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#useCasesCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#useCasesCarousel" data-slide="next">&rsaquo;</a>
                </div>
                <a class="btn btn-primary btn-large span2 offset1" href="#why">Why &raquo;</a> <a
                    class="btn btn-primary btn-large span2" href="#how">How &raquo;</a> <a class="btn btn-primary btn-large span2"
                        href="samples/index.htm">Demo &raquo;</a></div>
            <div id="pitchesCarousel" class="carousel slide" style="line-height: 30px">
                <div class="carousel-inner">
                    <div class="active item">
                        <i>Put some gestures in your web site</i></div>
                    <div class="item">
                        <i>Kinect-compliant Web App for all</i></div>
                    <div class="item">
                        <i>Kinect-enabled Web sites</i></div>
                </div>
            </div>
            <div class="row">
            </div>
        </div>
        <!-- Example row of columns -->
        <div class="row">
            <div class="span4">
                <h2>
                    Developers</h2>
                <h4>
                    Add gestures and remote control to your web site using only 3 lines of Javascript.</h4>
                <p>
                    jKinect is a ligthweighted Javascript framework that give access to high-level gestures
                    as well as raw skeleton informations.<br />
                    <em>Start using Kinect with just 3 lines of js.</em>
                </p>
                <p>
                    <a class="btn" href="#">Download jKinect now &raquo;</a></p>
            </div>
            <div class="span4">
                <h2>
                    Companies</h2>
                <h4>
                    Get more customers by adding innovative services and natural user experience to
                    your web site.</h4>
                <p>
                    From marketing to online shopping, jKinect helps you create innovative UX using
                    Kinect for Windows.
                    <br />
                    <em>Virtual dresser, virtual makeup, 3D catalog, ... everything is possible</em>
                </p>
                <p>
                    <a class="btn" href="#">View use-cases &raquo;</a></p>
            </div>
            <div class="span4">
                <h2>
                    Hackers</h2>
                <h4>
                    Take control of any websites (even the most secure ones) using your Kinect.</h4>
                <p>
                    Using the power of JavaScript, our jKinect library can be easily injected in any
                    website to turn it into a Kinect-enabled web application. Layout adjusting, event
                    triggering... 
                    <em>make yourself at home on any website.</em>
                </p>
                <p>
                    <a class="btn" href="#">View details &raquo;</a></p>
            </div>
        </div>
        <hr>
        <footer>
        <p>&copy; Octo Technology 2012</p>
      </footer>
    </div>
    <div id="about" class="modal hide">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                x</button>
            <h3>
                About us</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>Vincent Guigui</li>
                <li>Paul Henrion</li>
                <li>Florian Marin</li>
                <li><a href="http://www.octo.com">Octo Technology</a></li>
            </ul>
        </div>
    </div>
    <div id="otherProjects" class="modal hide">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                x</button>
            <h3>
                Our other projects</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li><a href="http://mockinect.codeplex.com">MocKinect</a> - Kinect streams recorder/injector</li>
                <li><a href="http://virtualpostcard.codeplex.com">VirtualPostcard</a> - Green screen
                    prototype for virtual scenes</li>
                <li><a href="http://blog.octo.com/vers-des-nouveaux-usages-de-lecture/">Gallica for
                    Kinect</a> - Kinect enabled book navigation</li>
            </ul>
        </div>
    </div>
    <div id="alternatives" class="modal hide">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                x</button>
            <h3>
                Alternatives projects</h3>
        </div>
        <div class="modal-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>
                            Framework
                        </th>
                        <th>
                            Components
                        </th>
                        <th>
                            Compatibility
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href="http://kinect.childnodes.com/">KinectJS</a>
                        </td>
                        <td>
                            Microsoft SDK and Adobe AIR server
                        </td>
                        <td>
                            <img src="img/chrome64.png" alt="Google Chrome" />
                            <img src="img/firefox64.png" alt="Mozilla Firefox" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="http://depthjs.media.mit.edu/">DepthJS</a>
                        </td>
                        <td>
                            OpenNI, Web browser plugin
                        </td>
                        <td>
                            <img src="img/chrome64.png" alt="Google Chrome" />
                            <img src="img/firefox64.png" alt="Mozilla Firefox" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="http://zigfu.com/">Zigfu</a>
                        </td>
                        <td>
                            Microsoft SDK/OpenNI, Web browser plugin
                        </td>
                        <td>
                            <img src="img/chrome64.png" alt="Google Chrome" />
                            <img src="img/firefox64.png" alt="Mozilla Firefox" />
                            <img src="img/ie64.png" alt="Microsoft Internet Explorer" />
                            <img src="img/safari64.png" alt="Apple Safari" />
                            Microsoft Kinect or ASUS Xtion
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="http://www.codeproject.com/Articles/309306/Kinect-HTML5-using-WebSockets-and-Canvas">Kinect WebSockets</a>
                        </td>
                        <td>
                            OpenNI, Web server
                        </td>
                        <td>
                            <img src="img/chrome64.png" alt="Google Chrome" />
                            <img src="img/firefox64.png" alt="Mozilla Firefox" />
                            <img src="img/ie64.png" alt="Microsoft Internet Explorer" />
                            <img src="img/safari64.png" alt="Apple Safari" />
                            Microsoft Kinect
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="http://motionnexus.com/">MotionNexus</a>
                        </td>
                        <td>
                            Microsoft SDK?/OpenNI?, Adobe, Flash, Flex, Air
                        </td>
                        <td>
                            <img src="img/chrome64.png" alt="Google Chrome" />
                            <img src="img/firefox64.png" alt="Mozilla Firefox" />
                            <img src="img/ie64.png" alt="Microsoft Internet Explorer" />
                            <img src="img/safari64.png" alt="Apple Safari" />
                            Microsoft Kinect
                        </td>
                    </tr>
				</tbody>
            </table>
        </div>
    </div>
    <!-- /container -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#pitchesCarousel").carousel({
                interval: 2000
            });
        });
    </script>
</body>
</html>
